<template>
  <view class="user container">
      <view class="list" v-if="orderList.length">
        <view class="item" v-for="item in orderList" :key="item.order_osn">
          <view class="flex-row-between order-no">
            <text>订单编号：{{item.order_osn}}</text>
            <text>{{item.state == 10 ? "未支付" : "已支付"}}</text>
          </view>
          <view class="flex-row-between order-info">
            <view>
              <view class="school">{{item.school_name}}</view>
              <view class="goods">{{item.goods_name}}</view>
              <view class="time">{{item.pay_time_str ? item.pay_time_str : ""}}</view>
            </view>
            <view class="money">{{item.money}}</view>
          </view>
        </view>
      </view>
      <view class="empty" v-else>暂无记录</view>
  </view>
</template>

<script setup>
const orderList = ref([])
/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  getOrderList()
})

const getOrderList = () =>{
  uni.showLoading({
    mask: true
  })
  http.request({
    url: '/api/order/list',
    method: 'POST',
    data: {
      open_id: uni.getStorageSync('openId')
    }
  }).then(({ data }) => {
    console.log(data, 111);
    if(data?.success){
     uni.hideLoading()
     orderList.value = data?.data
    }
  })
}
</script>

<style lang="scss" scoped>
@use "@/static/css/common.scss";
.user{
  padding: 32rpx;
  height: 100vh;
  overflow-y: scroll;
  background: #f8f8f8;
}
.item{
  margin-bottom: 32rpx;
  background: #fff;
  border-radius: 16rpx;
}
.order-no{
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
  border-bottom: 1px solid #f2f2f2;
}
.order-no text{
  white-space: nowrap;
}
.order-info{
  padding: 20rpx;
}
.school{
  font-size: 32rpx;
}
.goods{
  margin-top: 10rpx;
  color: #666;
  font-size: 28rpx;
  font-weight: 400;
}
.time{
  margin-top: 16rpx;
  color: #999;
  font-size: 28rpx;
  font-weight: 400;
}
.money{
  font-size: 36rpx;
  font-weight: bold;
}
.money::before{
  content: "￥";
  font-size: 32rpx;
  font-weight: normal;
}
.empty{
  padding: 30rpx 0;
  width: 100%;
  color: #666;
  font-size: 28rpx;
  text-align: center;
}
</style>
